<template>
	<div class="bg">
		<div class="box">
			<form class="myForm">
				<div class="div1">
					<p>后台管理</p>
				</div>
				<div class="div2">
					<input type="text" placeholder="用户名" v-model="user.username" required />
					<input type="password" placeholder="密码" v-model="user.password" id="pwd" required>
					<input class="btn" type="submit" @click="login()" value="登录" />
				</div>
			</form>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'AdminLogin',
		data() {
			return {
				user: {}
			}
		},
		methods: {
			login() {
				let kv = this.user;
				this.$postkv("/api/login", kv).then((resp) => {
					let token = resp.data.data.token;
					console.log(resp.data.data.token);
					alert("wryyyyyyyyyyyyyy")
					window.localStorage.setItem('token', token)
					this.$get("/api/user/info", this.user).then((resp) => {
						console.log(resp.data)
						window.localStorage.setItem("name", resp.data.data.name)
						window.localStorage.setItem("img", resp.data.data.img)
						window.localStorage.setItem("role", resp.data.data.role)
						window.localStorage.setItem("account", resp.data.data.account)
						window.localStorage.setItem("time", new Date().getTime())
						this.$store.state.name = resp.data.data.name;
						this.$store.state.role = resp.data.data.role;
						this.$store.state.img = resp.data.data.img;
						this.$store.state.account = resp.data.data.account;
						this.$store.state.time = resp.data.data.time;
							if (this.$store.state.role=='adm') {
								this.$router.push("/admin/home")
							} else{
								this.$router.push("/#/home")
							}
					})
				})
			}
		}
	}
</script>

<style scoped>
	body,
	html,
	.bg {
		height: 100%;
	}

	.bg {
		background-image: url('../../assets/img/bg.png');
		width: 100%;
		height: 100%;
		color: white;
		top: 0;
		left: 0;
		z-index: -1;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.box {
		justify-content: center;
		display: flex;
	}

	.myForm {
		margin: 120px auto;
		height: 320px;
		width: 350px;
		text-align: center;
		justify-content: center;
		background-color: white;
		border-radius: 3px;
	}

	.div1 {
		right: 20px;
		top: 40px;
		height: 40px;
		line-height: 40px;
		position: relative;
		box-shadow: black 2px 3px 5px;
		margin-right: 30px;
		background-color: #189f92;
		color: white;
	}

	.div1 p {
		margin-right: 100px;
	}

	.div2 {
		position: relative;
		margin-top: 50px;
	}

	input {
		height: 30px;
		width: 80%;
		margin: 10px auto;
		border: 1px solid darkgray;
		border-radius: 4px;
		text-indent: 1em;
	}

	.myForm aside {

		display: flex;
		margin: 10px;
	}

	.code {
		margin-left: 20px;
	}

	canvas {
		margin: 10px;
		width: 40%;
	}

	.btn {
		background-color: #189f92;
		color: white;
		font-size: 1em;
		border: #189f92 1px solid;
	}
</style>
